<!--盘点单管理、-->
<template>
  <div>
    <div>
      <button @click="openShowImage">图片预览</button>
      <showImg  v-if="isShow" @listenChild="listenChild" :images="images"></showImg>
      <div style="margin: 100px">
        <div class="item" v-for="(item,index) in list" :key="index">
          <span v-if="item.id === 0">{{item.name}} <i class="el-icon-edit" @click="updateItem(index)"></i></span>
          <el-input v-if="item.id === 1" v-model="item.name" placeholder="请输入内容" @blur="updateOk(index)"></el-input>
          <i class="el-icon-close close_item" @click="closeItem(index)"></i>
        </div>
      </div>
    </div>
    <div style="position:relative;width: 100%;height: 100%;">
      <div style="position:fixed;width: 100px;background-color: #6d26bf;">
        <div style="height: 20px;background-color: #f50000"><a href="#a">a</a></div>
        <div style="height: 20px;background-color: #ff0000"><a href="#b">b</a></div>
        <div style="height: 20px;background-color: #840000"><a href="#c">c</a></div>
        <div style="height: 20px;background-color: #450000"><a href="#d">d</a></div>
      </div>
      <div>
        <div id="a" style="height: 500px;background-color: #ffffff;">asdas</div>
        <div id="b" style="height: 500px;background-color: #bfb026;">asd</div>
        <div id="c" style="height: 500px;background-color: #26bf3a;">asd</div>
        <div id="d" style="height: 500px;background-color: #bf2645;">dsa</div>
      </div>
    </div>
  </div>
</template>
<script>
  import showImg from "../../../../components/showImg";
  export default {
    components:{ showImg },
    data(){
      return {
        images: [
          "https://qny.samt.top/3ukysgdRM9PP43ET.jpg",
          "https://qny.samt.top/2SN2472MG0wpji.jpg",
        ],
        isShow: false,
        list:[
                {name:'a',id:1},
                {name:'b',id:0},
                {name:'c',id:0}
                ]
      }
    },
    methods:{
      listenChild(e) {
        this.isShow = e;
      },
      openShowImage() {
        this.isShow = true;
      },
      closeItem(index) {
        this.list.splice(index,1);
      },
      updateItem(i){
        this.list[i].id = 1;
      },
      updateOk(i){
        this.list[i].id = 0;
      }
    }
  }
</script>
<style scoped>
  .item{
    width: 80px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    background-color: #bf2626;
    position: relative;
    margin: 10px;
  }
  .item:hover{
    background-color: rgba(172, 173, 175, 0.3);
  }
  .close_item{
    position: absolute;
    top: -10px;
    right: -10px;
  }
</style>
